<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <link rel="stylesheet" href="./css/index.css">
    <title>题三：实现成移动页或小程序</title>
</head>

<body>
    <div class="main">
        <!-- 手机状态栏 -->
        <div class="phoneBox">
            <ul>
                <li><span>9:41</span></li>
                <li>
                    <img src="./images/SketchPng7f6b61b1947a112679220d9e344d0d95ccb0ea4914e23f3df15656401bfa1a12.png"
                        alt="">
                    <img src="./images/SketchPng8def6b57c1744f034a9ee75a7e9ed512c97375009c77577e9a58eb32deeb566a.png"
                        alt="">
                    <img src="./images/SketchPng95f52ac007d32e1d7f4603ab0ab260e66ae2e1c7d7ac959840f2ee0dcae60353.png"
                        alt="">
                </li>
            </ul>
        </div>
        <!-- 标题栏 -->
        <div class="titleBox">
            <ul>
                <li><img src="./images/SketchPng6a11cc49eecc14ec9de2fb08b3e9611a524b528bcec00be4b4d62364a7f3cf82.png"
                        alt=""></li>
                <li>
                    <h2>Title</h2>
                </li>
                <li></li>
            </ul>
        </div>
        <!-- 标签栏 -->
        <input type="radio" name="chkTab" id="chkTab_SY" checked>
        <input type="radio" name="chkTab" id="chkTab_PHB">
        <div class="tabsBox">
            <ul>
                <label for="chkTab_SY">
                    <li>
                        <p>首页</p>
                        <span></span>
                    </li>
                </label>
                <label for="chkTab_PHB">
                    <li>
                        <p>排行榜</p>
                        <span></span>
                    </li>
                </label>
            </ul>
        </div>
        <!-- 内容部分 -->
        <div class="contBox">
            <!-- 首页内容 -->
            <div class="HomeBox">
                <!-- 图片滑块部分 -->
                <div class="photoSildeBox">
                    <ul>
                        <li>
                            <span>2022年中国-东盟博览会和中国-东盟商务与投资峰会广西领导小组第一次会议召开</span>
                        </li>
                        <li>
                            <span>2022年中国-东盟博览会和中国-东盟商务与投资峰会广西领导小组第一次会议召开</span>
                        </li>
                        <li>
                            <span>2022年中国-东盟博览会和中国-东盟商务与投资峰会广西领导小组第一次会议召开</span>
                        </li>
                    </ul>
                </div>
                <!-- 功能宫格部分 -->
                <div class="gridBox">
                    <ul>
                        <li>
                            <p>我要报名</p>
                        </li>
                        <li>
                            <p>我的心愿</p>
                        </li>
                        <li>
                            <p>我要兑换</p>
                        </li>

                        <li>
                            <p>志愿团队</p>
                        </li>
                        <li>
                            <p>排行榜</p>
                        </li>
                        <li>
                            <p>企业展示</p>
                        </li>
                    </ul>
                </div>
                <!-- 今日任务部分 -->
                <!-- 标题 -->
                <div class="title_JRRW">
                    <div class="leftBox">
                        <img src="./images/a90ffc913f5c4301b490febe65478125_mergeImage.png" alt="">
                        <span>今日任务</span>
                    </div>
                    <div class="rightBox">
                        <span>查看更多</span>
                        <img src="./images/SketchPng258b54011b6eefdcbead4ce108dd71e6f968d0a74bf6e0144b7195359e2190af.png"
                            alt="">
                    </div>
                </div>
                <div class="cont_RW">
                    <input type="radio" name="chkTab_RW" id="chkRW_YQ">
                    <input type="radio" name="chkTab_RW" id="chkRW_RC" checked>
                    <div class="tabsBox_Rw">
                        <ul>
                            <label for="chkRW_YQ">
                                <li>
                                    <p>共战疫情</p>
                                    <span></span>
                                </li>
                            </label>
                            <label for="chkRW_RC">
                                <li>
                                    <p>日常任务</p>
                                    <span></span>
                                </li>
                            </label>
                        </ul>
                    </div>
                    <!-- 日常任务内容部分 -->
                    <div class="box_RCList">
                        <ul>
                            <li>
                                <div class="leftBox">
                                    <img src="./images/f7745c06c4b94b2e9e4e5af9064726c5_mergeImage.png" alt="">
                                    <div class="txtBox">
                                        <span class="title">践行一盔一戴</span>
                                        <span class="jifen">+2 积分</span>
                                        <p class="txt">坚持一盔一戴，践行文明交通</p>
                                    </div>
                                </div>
                                <div class="rightBox">去打卡</div>
                            </li>
                            <li>
                                <div class="leftBox">
                                    <img src="./images/3c419ca58ae44fe682bf774be290573d_mergeImage.png" alt="">
                                    <div class="txtBox">
                                        <span class="title">垃圾分类投放</span>
                                        <span class="jifen">+2 积分</span>
                                        <p class="txt">坚持垃圾分类，推动生态文明建设</p>
                                    </div>
                                </div>
                                <div class="rightBox">已完成</div>
                            </li>
                            <li>
                                <div class="leftBox">
                                    <img src="./images/31c95c1c2ef848df9561b8145b12f687_mergeImage.png" alt="">
                                    <div class="txtBox">
                                        <span class="title">节约用水用电</span>
                                        <span class="jifen">+2 积分</span>
                                        <p class="txt">坚持节约用水用电</p>
                                    </div>
                                </div>
                                <div class="rightBox">去打卡</div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 排行榜内容 -->
            <div class="PHBBox">
                <input type="radio" name="chkTag" id="chkTagA" checked>
                <input type="radio" name="chkTag" id="chkTagB">
                <input type="radio" name="chkTag" id="chkTagC">
                <div class="tagBox">
                    <ul>
                        <label for="chkTagA">
                            <li>一星文明市民</li>
                        </label>
                        <label for="chkTagB">
                            <li>二星文明市民</li>
                        </label>
                        <label for="chkTagC">
                            <li>三星文明市民</li>
                        </label>
                    </ul>
                </div>
                <!-- 本人信息 -->
                <div class="MyinforBox">
                    <div class="leftBox">
                        <div class="TXBox">
                            <div class="PMBox">88</div>
                            <img src="./images/1c59fedb841745e589580f0f8a93aa9f_mergeImage.png" alt="">
                        </div>
                        <span class="name">张三</span>
                        <div class="SFBox">本人</div>
                    </div>
                    <div class="rightBox">
                        <span class="num">9</span>
                        <span class="JFBox">积分</span>
                    </div>
                </div>
                <!-- 排行列表 -->
                <div class="PHListBox">
                    <ul>
                        <li class="PHListBox_row">
                            <div class="leftBox">
                                <div class="TXBox">
                                    <div class="PMBox">
                                        <img src="./images/2_03.png" alt="">
                                    </div>
                                    <img src="./images/1c59fedb841745e589580f0f8a93aa9f_mergeImage.png" alt="">
                                </div>
                                <span class="name">李小雷</span>
                            </div>
                            <div class="rightBox">
                                <span class="num">199</span>
                                <span class="JFBox">积分</span>
                            </div>
                        </li>
                        <li class="PHListBox_row">
                            <div class="leftBox">
                                <div class="TXBox">
                                    <div class="PMBox">
                                        <img src="./images/2.png" alt="">
                                    </div>
                                    <img src="./images/1c59fedb841745e589580f0f8a93aa9f_mergeImage.png" alt="">
                                </div>
                                <span class="name">李四</span>
                            </div>
                            <div class="rightBox">
                                <span class="num">99</span>
                                <span class="JFBox">积分</span>
                            </div>
                        </li>
                        <li class="PHListBox_row">
                            <div class="leftBox">
                                <div class="TXBox">
                                    <div class="PMBox">
                                        <img src="./images/3.png" alt="">
                                    </div>
                                    <img src="./images/1c59fedb841745e589580f0f8a93aa9f_mergeImage.png" alt="">
                                </div>
                                <span class="name">韩梅梅</span>
                            </div>
                            <div class="rightBox">
                                <span class="num">90</span>
                                <span class="JFBox">积分</span>
                            </div>
                        </li>
                        <li class="PHListBox_row">
                            <div class="leftBox">
                                <div class="TXBox">
                                    <div class="PMBox">
                                    4
                                    </div>
                                    <img src="./images/1c59fedb841745e589580f0f8a93aa9f_mergeImage.png" alt="">
                                </div>
                                <span class="name">李雷</span>
                            </div>
                            <div class="rightBox">
                                <span class="num">90</span>
                                <span class="JFBox">积分</span>
                            </div>
                        </li>
                        <li class="PHListBox_row">
                            <div class="leftBox">
                                <div class="TXBox">
                                    <div class="PMBox">
                                    5
                                    </div>
                                    <img src="./images/1c59fedb841745e589580f0f8a93aa9f_mergeImage.png" alt="">
                                </div>
                                <span class="name">李雷</span>
                            </div>
                            <div class="rightBox">
                                <span class="num">90</span>
                                <span class="JFBox">积分</span>
                            </div>
                        </li>
                        <li class="PHListBox_row">
                            <div class="leftBox">
                                <div class="TXBox">
                                    <div class="PMBox">
                                    6
                                    </div>
                                    <img src="./images/1c59fedb841745e589580f0f8a93aa9f_mergeImage.png" alt="">
                                </div>
                                <span class="name">李雷</span>
                            </div>
                            <div class="rightBox">
                                <span class="num">90</span>
                                <span class="JFBox">积分</span>
                            </div>
                        </li>
                        <li class="PHListBox_row">
                            <div class="leftBox">
                                <div class="TXBox">
                                    <div class="PMBox">
                                    7
                                    </div>
                                    <img src="./images/1c59fedb841745e589580f0f8a93aa9f_mergeImage.png" alt="">
                                </div>
                                <span class="name">李雷</span>
                            </div>
                            <div class="rightBox">
                                <span class="num">90</span>
                                <span class="JFBox">积分</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

</html>